<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">
            <i class="mr-xxs fa" ng-class="typeClasses[component.type]"></i>{{component.options.title || 'No title'}}
        </h3>

        <div class="box-tools pull-right">
            <a href class="btn btn-box-tool" ng-click="editItem()" ng-if="showEdit">
                <i class="fa fa-pencil"></i> Edit
            </a>
            <a href class="btn btn-box-tool" ng-click="onRemove({rowIndex: rowIndex, colIndex: colIndex})" ng-if="showRemove">
                <i class="fa fa-times"></i> Remove
            </a>

        </div>
        <div class="box-tools pull-right" ng-if="mode === 'edit'">
            <button type="button" class="btn btn-box-tool" >
                <i class="fa fa-save"></i> Save
            </button>
        </div>
    </div>
    <div class="box-body" ng-switch="component.type">
        <dashboard-donut ng-switch-when="donut"
            entity="metadata[component.options.entity]"
            options="component.options"
            filter="filter"
            autoload="autoload"
            refresh-on="{{refreshOn}}"
            resize-on="{{resizeOn}}"
            mode="mode"></dashboard-donut>

        <dashboard-bar ng-switch-when="bar"
            entity="metadata[component.options.entity]"
            options="component.options"
            filter="filter"
            autoload="autoload"
            refresh-on="{{refreshOn}}"
            resize-on="{{resizeOn}}"
            mode="mode"></dashboard-bar>

        <dashboard-line ng-switch-when="line"
            entity="metadata[component.options.entity]"
            options="component.options"
            filter="filter"
            autoload="autoload"
            refresh-on="{{refreshOn}}"
            resize-on="{{resizeOn}}"
            mode="mode"></dashboard-line>

        <dashboard-multiline ng-switch-when="multiline"
            entity="metadata[component.options.entity]"
            options="component.options"
            filter="filter"
            autoload="autoload"
            refresh-on="{{refreshOn}}"
            resize-on="{{resizeOn}}"
            mode="mode"></dashboard-multiline>

        <dashboard-counter ng-switch-when="counter"
            entity="metadata[component.options.entity]"
            options="component.options"
            filter="filter"
            autoload="autoload"
            refresh-on="{{refreshOn}}"
            mode="mode"></dashboard-counter>

        <div ng-switch-default>Unhandled chart type</div>

        <!-- <pre>{{component.options | json}}</pre> -->
    </div>
</div>
